<template>
    <div class="coordinates-container">
        <el-form>
            <el-form-item>
                <el-select
                    class="area-select"
                    value-key="areaName"
                    v-model="areaSelect"
                    placeholder="可选区域"
                    clearable
                    @clear="areaClear"
                >
                    <!-- <el-option
                        :label="'China'"
                        :value="{ areaName: 'China', longitude: [73, 135], latitude: [3, 53] }"
                    ></el-option> -->
                    <el-option
                        v-for="item in areaOptions"
                        :key="item.value"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // area: {
            //     longitude: this.value.longitude,
            //     latitude: this.value.latitude,
            // },
            // areaSelect: {},
            areaSelect: null,
            areaOptions: [
                {value: 'NHEM'},
                {value: 'SHEM'},
                {value: 'EASI'},
                {value: 'TROP'},
                {value: 'GLOB'},
            ],
        };
    },
    props: {
        value: {
            type: String,
            require: true,
        },
    },
    // computed: {
    //     coordinates() {
    //         const { longitude, latitude } = this.area;
    //         return { longitude, latitude };
    //     },
    // },
    watch: {
        // coordinates: function(val) {
        //     // 阻止无限嵌套
        //     if(JSON.stringify(val) === JSON.stringify(this.value)) return;
        //     this.$emit("input", val);
        // },
        // 实现父组件修改prop可以修改子组件的值
        value: function(val) {
            this.area = val;
            if(!val.longitude[0]) this.areaSelect = null;
        }
    },
    methods: {
        // 预选值赋值
        // areaChange() {
        //     if (this.areaSelect != []) {
        //         this.area = this.areaSelect;
        //         this.$emit('changeArea', this.area.areaName);
        //     } 
        // },
        // 选择框清空
        areaClear() {
            // this.area = {
            //     longitude: [undefined, undefined],
            //     latitude: [undefined, undefined],
            // };
            this.areaSelect = null;
        },
    },
};
</script>

<style lang="scss" scoped>
</style>
